Sign in using Linkedln and MVC 

This article shows and highlights how to sign in using Linkedln button. 

First of all, you need to register your application with Linkedln, as with other global sign-in 
providers. The screenshot below shows how: 
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Applications allow you manage desktop and mobile software that leverage Linkedln APIs 
You do not have any applications. 



Home Docs Support Partners Blog Legal My Apps REST Console 
Linkedln Corporation © 201 5 About Cookie Policy Privacy Policy User Agreement 



After you create your application on Linkedln site, it is as if you have registered it with Linkedln 
sot allow users to sign in using Linkedln button. Linked in Uses openAuth protocol. 

Below is a scrrenshot at my test app that I have just created: 
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There are several settings you must configure before jumping to implementing the actual sign- 
in: 

Authentication Section 



Please see the highlighted red options that need to be selected: 
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Authentication Keys 

Client ID: 77gmv»qm40uloj7 
Client Secret: MPa2GdleqyZ8hnzM 

Default Application Permissions 

r emailaddress 



rw_company_admin 



OAuth 2.0 

Authorized Redirect URLs: 



OAuth 1 .0a 

Default "Accept" Redirect URL: 



Default "Cancel" Redirect URL: 



Settings Section 

Application Status needs to be put Live, Application Logo URL needs to be HUPS, and Website 
URL is where you will be running your MVC application, or any other application. 
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JavaScript Section 

In this section, as seen below in the image, you need to put the URLs in your app where SDK will 
be put, like Javascript, and other frameworks, I have put two urls of my local app 
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JavaScript Settings 

Valid SDK Domains: 



http://localhost:55726/ 


o 


http Hlocalhost:55726/Home/lndex 


© 
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Usage and Limits Section 



Here you do not have to do anything, it will simply show you how many hits your app has, mine 
until now has 100 out of 100, 000. 
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Usage & Limits 

API usage between midnight of 23 Jun 2015 UTC and now 



Resource 


Current 


Maximum 


Status 


Throttled Member IDs 


Get My Profile 


100 


100000 


© 


None 
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Now The Code 

Linked in Provides the following code to implement your sign-in: 

In the head section you need to include your api key , as set by Linkedln: 

< script type=" text/ javascript" src="//platform.linkedin. com/in. js"> 
api_key: xxxxxxxxxxxxxxx (your own api goes here) 
</script> 

Then we add linked in Sign In Button : 

•cinput type="button" onclick="onLinkedInLoad() " style="background- 
image:url( . ./. ./Images/Sign-In-Small — Hover. png); width:293px; height :41pxj 
background-repeat :no-repeat"/> 

With a call to onLinkedInLoad() 

function onLinkedInLoad( ) { 

IN.UI.Authorize() .place(); 

IN. Event. on(INj "auth"., function () { onLogin(); }); 



IN. Event. on(IN, "logout"., function () { onLogoutQ; }); 

} 



This function sets the functions to act after authentication and after log out. In this case we have 
onLogin and onLogout. 

onLogin: 

function onLogin() { 

IN. API. Prof ile("me") . result (displayResult) ; 

} 

onLogout : 

function onLogout() { 
IN.User.logout(); 

} 

And 



displayResult function: 

function displayResult(prof iles) { 
member = profiles. values[0]; 

$.ajax({ 

type: 'POST'., 

url: '<%= Url.Action( "AuthenticateUser", "Home") %>' , 
data: { 

UID: member. id, 

FNAME: member .firstName, 

LNAME: member. lastName 

h 

dataType: 'html', 
success: function () { 

location. href = "Home/Index?f=" + member .firstName + "&1=" + 

member .lastName; 

h 

error: function (req, status, err) { 
alert(err) ; 

} 

})J 



} 



That is all there is to implement log in. Official linkedlnbutton is downloaded 
from their site as well: You can chceck these URLs for official linked in Buttons: 



https : //developer . linkedin . com/docs /signin- wit h-linkedin 



https : //developer . linkedin . com/downloads 



And here is my view as in MVC: 

<%(S) Page Language="C#" MasterPageFile="~/Views/Shared/Site .Master" 
Inherits="System.web.Mvc .ViewPage" %> 



<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> 

<%if (Request["f "] != null && Request["l"] != null) 
{ %> 



<div class="app-bar"> 

<a class="app-bar-element"> 

<span id="toggle-tiles-dropdown" class="mif -apps mif-2x">Welcome <%= 
Request["f"] .ToString() + " " + Request["l"] .ToString( )%></span> 
<div class="app- bar -drop -container" 
dat a -role=" dropdown" 

data- toggle -element="#toggle- tiles -dropdown" 
data-no-close="f alse" style="width : 324px;"> 
<div class="tile-container bg-white"> 
<div class="tile-small bg-cyan"> 

<div class="tile-content iconic"> 

<span class="icon mif -onedrive"x/span> 
</div> 
</div> 

<div class="tile-small bg-yellow"> 

<div class="tile-content iconic"> 

<span class="icon mif -google"x/span> 

</div> 
</div> 

<div class="tile-small bg-red"> 

<div class="tile-content iconic"> 

<span class="icon mif -facebook"x/span> 

</div> 
</div> 

<div class="tile-small bg-green"> 

<div class="tile-content iconic"> 

<span class="icon mif -twitter"x/span> 

</div> 
</div> 



<div class="tile-small bg-green"> 

<div class="tile-content iconic"> 

<span class="icon mif -twitter"x/span> 
</div> 

</div> 



</div> 
</div> 



</a> 
</div> 



<%} 
else 
{ %> 

<% if (ViewData["newuserjustregistered"] != null && 
ViewData["newuserjustregistered"] .ToString() == "TRUE") 
{ %> 

<div class="logln-f orm padding20 block-shadow" style="opacity : 1; -webkit- 
transform: scale(l); transform: scale(l); -webkit-transition : 0.5s; transition: 
0.5s;"> 



<hl class="text- light ">Register</hl> 
<hl class="text-enlarged">Step 2</hl> 
<hr class="thin"> 
<br> 

<div class="input-control text full-size" data-role="input"> 
Nowjplease <a href="#" onclick="onLinkedInLoad2(<%= 
ViewData [ " LAST_REG_USR" ] . ToString( ) %>)">click here</a> to bind your account to 
Linkedln 

</div> 
</div> 

<%} 

else 
{ %> 

<div class="login-f orm padding20 block-shadow" style="opacity : 1; -webkit- 
transform: scale(l); transform: scale(l); -webkit-transition: 0.5s; transition: 
0.5s;"> 

<form action="/Home/RegisterUser" runat="server" method="post"> 
<hl class="text- light ">Register</hl> 
<hl class="text-enlarged">Step K/hl> 
<hr class="thin"> 
<br> 

<div class="input-control text full-size" data-role="input"> 
<label f or="user_login">First Name : </label> 
<input type="text" name="user_f_name" id="user_f_name" 
style="padding-right : 39px;"> 

<button class="button helper-button clear" tabindex="-l" 
type=" button ">< span class="mif-cross"x/spanx/button> 
</div> 



<br> 
<br> 



<div class="input-control text full-size" data-role="input"> 
<label for="user_login">Last Name: </label> 
<input type="text" name="user_l_name" id="user_l_name" 
style="padding-right : 39px;"> 

<button class="button helper-button clean" tabindex="-l" 
type=" button ">< span class = "mif-cross"x/spanx/button> 
</div> 



<br> 
<br> 

<div class="input-control text full-size" data-role="input"> 
< label for=" use r_login"> Email : </ label > 
<input type="text" name="user_email" id="user_email" 
style="padding-right : 39px;"> 

<button class="button helper-button clean" tabindex="-l" 
type=" button ">< span class = "mif-cross"x/spanx/button> 
</div> 
<br> 
<br> 



<div class="f orm-actions"> 

•(button type="submit" class="button primary">Register</button> 
•(button type="button" class="button link" 
onclick="clearRegForm( ) ">Cancel</ button > 
</div> 
</form> 
</div> 



<div class="login-form padding20 block-shadow" style="opacity : lj -webkit- 
transform: scale(l); transform: scale(l); -webkit-transition : 0.5s; transition: 
0.5s;"> 

<hl class = "text - light ">Or.,</hl> 

<hr class="thin"> 

<br> 

<div> 

<input type="button" onclick="onLinkedInLoad() " style="background- 
image: url( . . / . . /Images/Sign-In-Small — Hover. png); width: 293px; height: 41px; 
background-repeat: no-repeat" /></div> 



</div> 

<%} %> 
<%} %> 
</asp:Content> 



My Master Page: 

<%@ Master Language="C#" Inherits="System.web.Mvc.ViewMasterPage" %> 

<!DOCTYPE html> 
<html lang="en"> 
<head runat="server"> 



<script type= "text/ javascript" src=" //platform . linkedin . com/ in . js"> 
api_key: xxxxxxxxxxxxx 

</script> 

<script type= "text/ javascript "> 



var lastru; 

function onLinkedInLoad2(LRU) { 
IN.UI.Authorize() .place(); 

IN. Event. on(INj "auth"., function () { onLogin2(); }); 
lastru = LRU; 

} 

function onLogin2() { 

IN .API . Prof ile( "me" ) . result (SaveResult) ; 

} 

function SaveResult(profiles) { 
member = profiles. values[0]; 

$.ajax({ 

type: 'POST'., 

url: '<%= Url.Action("SaveRegisteringUserStep2"., "Home") %>' , 
data: { 

UID: member. id, 
FNAME: member .firstName , 
LNAME: member. lastName,, 
IDENTITY: lastru 

}, 

dataType: 'html', 
success: function () { 

location. href = "Index"; 

h 

error: function (req, status, err) { 
alert(err) ; 

} 

})J 



} 



function onLinkedInLoad() { 
IN.UI.Authorize() .place(); 

IN. Event. on(INj "auth"., function () { onLogin(); }); 
IN. Event. on(INj "logout"., function () { onLogoutQ; }); 

} 

function onLogin() { 

IN. API. Profile ("me") . result (displayResult) ; 

} 



function displayResult(prof iles) { 
member = profiles. values[0]; 



$.ajax({ 

type: 'POST'., 

url: '<%= Url.Action( "AuthenticateUser", "Home") %>', 
data: { 

UID: member. id, 

FNAME: member .firstName , 

LNAME: member. lastName 

h 

dataType: 'html', 
success: function () { 

location. href = "Home/Index?f =" + member .firstName + "&1=" + 

member .lastName; 

h 

error: function (req, status, err) { 
alert(err) ; 

} 

})J 



} 



function clearRegForm( ) { 

$("#user_f_name") .val("") ; 
$("#user_l_name") .val("") ; 
$("#user_email") .val("") ; 

} 

function RegisterUser(FIRST_NAME, LAST_NAME, EMAIL) { 
$.ajax({ 

type: 'POST', 

url: '<%= Url .Action( "RegisterUser", "Home") %>', 
data: { 

firstName: USERID, 

lastName: FIRST_NAME, 

email: EMAIL 

}, 

dataType: 'html', 
success: function () { 
alert( ' success ' ) ; 

error: function (req, status, err) { 
alert(err) ; 

} 

})J 

} 



</script> 
<script 

src=" http://ajax.googleapis.eom/ajax/libs/jquery/l.ll.2/jquery.min. js"x/script> 

<link href=" . ./ . . /docs/css/metro. ess" rel="stylesheet"> 
<script src=" . ./. . /docs/js/metro. js"x/script> 
<link href=" . ./ . . /docs/css/metro- icons .ess" rel=" style sheet "> 
</head> 



<body> 

<asp:ContentPlaceHolder ID="MainContent" runat="server"> 

</asp: Content PlaceHolder> 
</body> 
</html> 



And my Model: 



using System; 

using System. Collections .Generic; 
using System. Linq; 
using System. Web; 

namespace Login. Models 
{ 

public class UserAuthentication 
{ 

public System. Data. DataTable AuthenticateUser( string UID., string FNAME, 
string LNAME) 
{ 

string connectionString = "data source=P0RPRG_2177\\SQLEXPRESS; Initial 
Catalog=LOGIN; Integrated Security=True" ; 

string query = "SELECT * FROM [LOGIN] . [dbo] . [Users] WHERE [LINuserid] 
= '" + UID + "' AND [LINFirstName] = '" + FNAME + '"AND [ LINLastName] = '" + 
LNAME + '" ORDER BY LocalUserlD DESC"; 

System. Data. SqlClient.SqlConnection conn = new 
Sy stem. Dat a. SqlClient.SqlConnection( connectionString); 

System. Data. SqlClient.SqlCommand cmd = new 
System . Data . SqlClient . SqlCommand (query , conn ) ; 

System. Data. DataTable dt = new System. Data. DataTable(); 

conn.Open(); 

System. Data. SqlClient. SqlDataAdapter da = new 
System . Data . SqlClient . SqlDataAdapter ( cmd) ; 
da.Fill(dt); 
conn.Close(); 
da.Dispose(); 

return dt; 

} 

public int RegisterUser( string firstName, string lastName, string email) 
{ 

int ident; 

System. Data. SqlClient.SqlConnection connection = new 
System . Data . SqlClient . SqlConnection( "data source=P0RPRG_2177\\SQLEXPRESS; initial 
catalog=LOGIN; Integrated Security=True" ) ; 

string SQL_to_register = "INSERT INTO 
Users([LocalFirstName], [LocalLastName] , [LocalEmail] ) VALUES ("' + firstName + 
"V" + lastName + + email + '") select SCOPE_IDENTITY( ) "; 



System. Data. SqlClient.SqlCommand command = new 
System . Data . SqlClient . SqlCommand (SQL_to_register , connection) ; 
connection .Open() ; 

Object objc = command . ExecuteScalar( ) ; 
ident = Convert. ToInt32(objc); 
connection . Close ( ) ; 
return ident; 

} 

public void SaveRegisteringUserStep2(string UID, string FNAME, string 
LNAME j string idtty) 
{ 

System. Data. SqlClient. SqlConnection connection = new 
System . Data . SqlClient . SqlConnection ( "data source=P0RPRG_2177\\SQLEXPRESS; initial 
catalog=LOGIN; Integrated Security=True" ) ; 

string SQL_to_register = "UPDATE Users SET [LINuserid] = "' + UID + 
[LINFirstName] = '" + FNAME + '" , [LINLastName] = '" + LNAME + '" WHERE 
[LocalUserlD] = " + idtty; 

System. Data. SqlClient. SqlCommand command = new 
System . Data . SqlClient . SqlCommand (SQL_to_register , connection) ; 

connection .Open() ; 

command . ExecuteNonQuery( ) ; 

connection . Close ( ) ; 

} 



The model class helps in additional security layer. 

The image below demonstrates the options a user given to REGISTER. Registering 
stores his information on SQL server, and then matched against the Linkedln 
credentials. 

I actually created a table where I store both, users info, as well as linked in 
info, attributed to the same user. This was it is easier to identify users later 
on . 



□ Results | [jj Messages] 



LocalUserlD LocalFirstName Local Last Name LocalEmail LINuserid LINFirstName LINLastName 

1 21 JINAN KDRDAB j JINANKORDAB@HOTMAIL.COM j «^^Bph Jinan Kordab 

2 22 JINAN KORDAB " T N AN KC R D ABl§ H 5 ''M A! . CO '•' dMMM* Jinan Kordab 



And here is a screenshot of my app: 





W | localhost:55726/Home I x ^ 


<- C H Q localho:£> Q © : 




Rpn ictpr 

lACU 1 o LCI 
Step 1 




First Name: 








Last Name: 








Email: 









Or, 



jn Sign in with Linkedln 



Another screenshot after user logs and authenticates successfully: 



